<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <!--[if lt IE 9]>
    <script src="http://www.json.org/json2.js"></script>
    <![endif]-->
    <script type="text/javascript" src="../static/js/head.js"></script>
</head>
<body>
<section>
    <div>
        <blockquote>
            <div>
                <button ADP_BTN ADP_ICON="add" method="addItem">增加</button>
                <button ADP_BTN ADP_ICON="delete" method="deleteAllEntity">删除</button>
            </div>
        </blockquote>

        <div class="adp-content">
            <form action="" method="post" id="queryForm"></form>


            <table id="queryTable"></table>
        </div>

    </div>
</section>

<div style="width: 400px;display: none;" id="mergeFormDiv">
    <br/>
    <form action="" method="post" id="mergeForm"></form>
</div>


</body>
</html>

<script type="text/javascript" src="../static/js/adp2.js"></script>
<script type="text/javascript">

    var roleList = SV("Role")("getAllRoleList")().map(function (role) {
        return {value: role.id, lable: role.roleName, name: "roles[" + role.id + "]"};
    });


    var queryform = $("#queryForm").adpForm({
        elem: [{type: "text", lable: "名称", name: "name", placeholder: "请输入关键字"}],
        button: [{type: "submit", lable: "查询", method: "queryTable", icon: 'query'}]
    });
    var mergeForm = $("#mergeForm").adpForm({
        layout: 'vertical',
        elem: [
            {type: "text", lable: "名称", name: "name", verify: "required", placeholder: "请输入内容"},
            {type: "text", lable: "真实姓名", name: "realName"},
            {type: "text", lable: "电话", name: "telephone"},
            {type: "dept", lable:"部门", name: "dept"},
            {type: "text", lable: "密码", name: "password", placeholder: "请输入内容"},
            {type: "checkbox", lable: "角色", verify: "roleNameRequired", data: roleList},
            {type: "switch", lable: "冻结", name: "locked", value: "true", checked: true},
            {type: "hidden", name: "id", value: ""}

        ],
        button: [
            {type: "submit", lable: "保存", method: "submitEditEntity"},
            {type: "reset", lable: "重置"}
        ],
        verify: {//自定义验证,可选项目
            //加在普通div上也有效
            roleNameRequired: function (value) {
                if ($("input[name*='roles']:checked").size() == 0) {
                    return '至少勾选一个角色!';
                }
            },
            adplength: [/(.+){6,12}$/, '必须6到12位']
        }
    });


    var adptable = $("#queryTable").adpTable({
        service: "User",
        method: "list",
        enableCheckbox: true,
        columns: [
            {field: 'name', title: '名称', width: 180},
            {field: 'password', title: '密码', width: 80},
            {field: 'realName', title: '真实姓名', width: 100},
            {field: 'telephone', title: '电话', width: 150},
            {
                field: 'locked', title: '冻结账户', width: 100, field: function (i, obj) {
                return obj.locked ? "是" : "否";
            }
            },
            {
                field: 'url', title: '拥有角色', field: function (i, obj) {
                if (obj.roles)
                    return obj.roles.map(function (item) {
                        return item.roleName;
                    }).join(",");

                return '未绑定角色';
            }
            },
            {
                title: '操作', width: 220, field: function () {
                return '<button ADP_BTN ADP_ICON="update" method="updateEntity">更新</button>' +
                    '<button ADP_BTN ADP_ICON="delete" method="deleteEntity">删除</button>'
                    ;
            }
            }
        ]
    });

    function queryTable(obj) {
        adptable.load(obj);
    }


    function addItem() {
//        var data= mergeForm.getData();
//        $.msg(JSON.stringify(data));
        mergeForm.reset();
        $("#mergeFormDiv").open("添加用户");
        $("[name='name']").removeClass("layui-disabled");
        $("[name='password']").removeClass("layui-disabled");
    }
    function updateEntity(entity) {
        mergeForm.reset();

        var roles = entity.roles;
        for (var i = 0; i < roles.length; i++) {
            var temp = roles[i];
            entity["roles[" + temp.id + "]"] = temp.id;
        }

        if(entity.dept){
            var dept=entity.dept;
            entity.dept=dept.id;
            entity.deptText=dept.name;
        }

        $("[name='name']").addClass("layui-disabled");
        $("[name='password']").addClass("layui-disabled");


        mergeForm.setData(entity);
        //对于复杂表单项，自己赋值


//        $.msg(JSON.stringify(entity));
        $("#mergeFormDiv").open("更新实体");
    }


    /**
     * 点击添加更新按钮的处理函数，入参obj框架会传入，直接使用即可
     * @param obj为表单数据对象，注意可能和后台接收pojo类型不完全匹配，这就需要你自己整理
     */
    function submitEditEntity(obj) {
//        $.alert(JSON.stringify(mergeForm.getData()));return;
        //处理下角色表单，方便后台接收
        var roles = [];

        for (var x in obj) {
            if (x.indexOf("roles[") == 0) {
                roles.push({id: obj[x]});
            }
        }

        obj.roles = roles;
        if(obj.dept!=""){
            obj.dept={id:obj.dept};
        }


        $.confirm("确定要提交吗？", {title: "确认"}, function (index) {
            var maskId = $.load();//开启遮罩，防止重复点击提交按钮
            var data = SV("User")("merge")(obj);//调用后台服务
            $.close(maskId);//关闭遮罩
            if (data.name) {//只需处理成功调用的情况，调用失败框架会提示出错信息
                $.msg("[" + data.name + "]保存成功!");
                $("#mergeFormDiv").close();//关闭弹出框
            }
            $.close(index);//手动关闭确认框
            queryTable(queryform.getData());// 查询表格
        });

    }

    function deletePost(arr) {

        $.confirm("确定要删除吗？", {title: "确认"}, function (index) {
            SV("User")("delete")({
                ids: arr.map(function (t) {
                    return t.id;
                })
            });
            $.close(index);
            $.msg("删除成功!");
            queryTable(queryform.getData());// 查询表格
        });
    }

    /**
     * 删除单个
     */
    function deleteEntity(entity) {
        deletePost([entity]);
    }

    /**
     * 删除多个
     */
    function deleteAllEntity() {
        var arr = adptable.getSelection();
        if (arr.length == 0) {
            $.msg("请选择要删除的项目!")
            return;
        }
        deletePost(arr);


    }

    queryTable(queryform.getData());//

</script>